<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <main>
      <span>houdunren</span>
      <span>houdunren.com</span>
      <span>hdscmd.com</span>
    </main>
    <script>
      let str = "hddddd";
      // 贪婪匹配:尽可能的匹配多个而不是一个
      console.log(str.match(/hd+/)); //hdddddd
      // 禁止贪婪 尽可能匹配少的<=0

      // 当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，
      // 匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，
      // 而默认的贪婪模式则尽可能多的匹配所搜索的字符串。
      // 例如，对于字符串 "oooo"，'o+?' 将匹配单个 "o"，而 'o+' 将匹配所有 'o'。
      //   console.log(str.match(/hd+?/)); //hd
      //   console.log(str.match(/hd*?/)); //h
      //   console.log(str.match(/hd{2,}?/)); //hdd

      //   案例 把，每一个span换成h4
      const main = document.querySelector("main");
      let strr = `<span>hdscmd.com</span>`;
      let reg = /<(span)>([\s\S]+?)<\/\1>/gi; //禁止贪婪只会匹配第一个span就结束
      // console.dir(strr.match(reg));

      main.innerHTML = main.innerHTML.replace(reg, (p0, p1, p2, p3, p4) => {
        console.log(p0, "sad");
        console.log(p1);
        console.log(p2);
        console.log(p3);
        console.log(p4);
        return `<h4 style="color:red">${p2}</h4>`;
      });
    </script>
  </body>
</html>
